<template>
  <view>
    <view class="users">
      <!-- <img
        class="conBg"
        referrerPolicy="no-referrer"
        src="https://images.cnblogs.com/cnblogs_com/tcz1018/1766176/o_221207100125_bg3.png"
        alt=""
      /> -->

      <view class="usercent">
        <image
          class="bg"
          src="../../static/wodebg.png"
          alt=""
          style="position: absolute; top: 0; left: 0;width: 100%; height: 100%"
        />
        <view class="avatar">
          <u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg"> </u-avatar>
        </view>
        <view class="name">
          <span>Hi {{ username }}</span>
        </view>

        <view class="order-section">
          <view class="order-title">
            <text>我的订单</text>
            <text class="view-all" @click="handleClickOrder('全部')">全部订单 ></text>
          </view>
          <view class="order-status">
            <view class="status-item" @click="handleClickOrder('待支付')">
              <image
                src="../../static/daizhifu.png"
                alt=""
                style="width: 60rpx; height: 60rpx"
              />
              <text>待支付</text>
            </view>
            <view class="status-item" @click="handleClickOrder('已支付')">
              <image
                src="../../static/yizhifu.png"
                alt=""
                style="width: 60rpx; height: 60rpx"
              />
              <text>已支付</text>
            </view>
            <view class="status-item" @click="handleClickOrder('已使用')">
              <image
                src="../../static/yishiyong.png"
                alt=""
                style="width: 60rpx; height: 60rpx"
              />
              <text>已使用</text>
            </view>
            <view class="status-item" @click="handleClickOrder('已取消')">
              <image
                src="../../static/yiquxiao.png"
                alt=""
                style="width: 60rpx; height: 60rpx"
              />
              <text>已取消</text>
            </view>
            <view class="status-item" @click="handleClickOrder('已退款')">
              <image
                src="../../static/yituikuan.png"
                alt=""
                style="width: 60rpx; height: 60rpx"
              />
              <text>已退款</text>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-top: 18rpx">
        <gwbq-calendar
          :insert="true"
          :lunar="true"
          :start-date="'2019-3-2'"
          :end-date="'2019-5-20'"
          @change="change"
        />
      </view>

      <view class="menu-list">
        <view class="menu-item" @click="handleClick('车牌号管理')">
          <text>车牌号管理</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item" @click="handleClick('社群福利')">
          <text>社群福利</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item" @click="handleClick('我的出租/求租信息')">
          <text>我的出租/求租信息</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item" @click="handleClick('我的车位买卖信息')">
          <text>我的车位买卖信息</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view class="menu-item" @click="handleClick('我的车场加盟信息')">
          <text>我的车场加盟信息</text>
          <u-icon name="arrow-right" size="18"></u-icon>
        </view>
        <view
          style="margin-top: 20rpx"
          class="menu-item"
          @click="handleClick('设置')"
        >
          <text>设置</text>
          <u-icon name="arrow-right" size="24"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: uni.getStorageSync("realname"),
    };
  },
  methods: {
    change() {},
    handleClick(type) {
      wx.vibrateShort({
        type: "medium",
      });
      switch (type) {
        case "车牌号管理":
          uni.navigateTo({
            url: "/pages/user/license-plate",
          });
          break;
        case "社群福利":
          uni.navigateTo({
            url: "/pages/user/community-benefits",
          });
          break;
        case "我的出租/求租信息":
          uni.navigateTo({
            url: "/pages/user/rental-info?type=self",
          });
          break;
        case "我的车位买卖信息":
          uni.navigateTo({
            url: "/pages/user/parking-trade?type=self",
          });
          break;
        case "我的车场加盟信息":
          uni.navigateTo({
            url: "/pages/user/parking-join",
          });
          break;
        case "设置":
          uni.navigateTo({
            url: "/pages/user/settings",
          });
          break;
      }
    },
    handleClickOrder(type) {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/index/order/index?type=" + type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.users {
  width: 100%;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  background: #f4f4f4;

  //   .conBg {
  //     width: 100%;
  //     height: 100vh;
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     opacity: 0.8;
  //     z-index: -1;
  //   }

  .usercent {
    width: 100%;
    height: 400rpx;
    background: #bbbbbb;
    padding: 30rpx;
    box-sizing: border-box;
    // margin-top: 200rpx;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 200rpx;

    .avatar {
      margin-right: 18rpx;
      z-index: 1;
    }

    .name {
      font-size: 34rpx;
    }

    .order-section {
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-top: 20rpx;
      width: calc(100% - 100rpx);
      position: absolute;
      top: 250rpx;

      .order-title {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1rpx solid #eee;

        .view-all {
          color: #999;
          font-size: 28rpx;
        }
      }

      .order-status {
        display: flex;
        justify-content: space-around;
        padding: 30rpx 0;

        .status-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          text {
            margin-top: 10rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .menu-list {
    margin-top: 20rpx;
    border-radius: 12rpx;
	font-size: 26rpx;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 1rpx solid #eee;
      background: #fff;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
